package com.wei.stavix.ui.module.account

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.ClickableText
import androidx.compose.material.Button
import androidx.compose.material.Checkbox
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import com.wei.stavix.R
import com.wei.stavix.ui.theme.ColorPrimary
import com.wei.stavix.ui.theme.PaddingPage
import com.wei.stavix.ui.widget.LoginInput
import com.wei.stavix.ui.widget.PhoneView
import com.wei.stavix.ui.widget.clickTime

@Composable
fun RegisterPageView(viewModel: AccountViewModel, navController: NavHostController, msg: String?) {
    // val viewModel = viewModel<AccountViewModel>()
    // 1: email register, 2: phone , 3: forgot pwd
//    var viewModel: AccountViewModel = viewModel()
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .background(color = Color.White)
            .padding(start = PaddingPage, end = PaddingPage)
    ) {

        Spacer(modifier = Modifier.height(20.dp))

        Image(
            painter = painterResource(id = R.drawable.icon_backward),
            contentDescription = null,
            modifier = Modifier.clickable {
                // Pop everything up to the "home" destination off the back stack before
// navigating to the "friendslist" destination
                //viewModel.onTopBackClick(viewModel.pageShowFlag)
                navController.popBackStack()
            })

        Spacer(modifier = Modifier.height(45.dp))

        if (viewModel.pageShowFlag == 3) {
            Text(
                text = "忘记密码, msg:$msg",
                textAlign = TextAlign.Center,
                fontSize = 24.sp,
                color = Color.Black,
            )

            Spacer(modifier = Modifier.height(57.dp))
            Row(modifier = Modifier.fillMaxWidth()) {
                PhoneView()
            }
            Spacer(modifier = Modifier.height(30.dp))
            LoginInput(1)
        } else {
            Text(
                text = "注册, msg:$msg",
                textAlign = TextAlign.Center,
                fontSize = 24.sp,
                color = Color.Black,
            )
            Spacer(modifier = Modifier.height(68.dp))
            LoginInput(if (viewModel.pageShowFlag == 1) 4 else 5)
        }

        Spacer(modifier = Modifier.height(27.dp))

        Row {
            LoginInput(
                3, modifier = Modifier
                    .weight(1f)
                    .height(45.dp)
            )
            Spacer(modifier = Modifier.width(18.dp))
            Button(
                onClick = { viewModel.clickSend() },
                shape = RoundedCornerShape(8.dp),
            ) {
                Text(
                    text = "获取验证码",
                    textAlign = TextAlign.Center,
                    fontSize = 10.sp,
                    color = Color.White,
                )
            }
        }

        Spacer(modifier = Modifier.height(27.dp))

        LoginInput(2)

        if (viewModel.pageShowFlag != 3) {
            Spacer(modifier = Modifier.height(24.dp))

            Row(verticalAlignment = Alignment.CenterVertically) {
                Checkbox(checked = true, onCheckedChange = {})
                Spacer(modifier = Modifier.height(6.dp))
                val annotatedText = buildAnnotatedString {
                    append("同意 ")

                    // We attach this *URL* annotation to the following content
                    // until `pop()` is called
                    pushStringAnnotation(tag = "URL1", annotation = "https://developer.android.com")
                    pushStringAnnotation(tag = "URL2", annotation = "https://www.baiddu.com")
                    withStyle(
                        style = SpanStyle(
                            color = Color.Blue,
                            fontWeight = FontWeight.Bold
                        )
                    ) {
                        append("《用户协议 》")
                    }
                    append("和")
                    withStyle(
                        style = SpanStyle(
                            color = Color.Blue,
                            fontWeight = FontWeight.Bold
                        )
                    ) {
                        append("《隐私协议》")
                    }
                    pop()
                }

                ClickableText(
                    text = annotatedText,
                    onClick = { offset ->
                        // We check if there is an *URL* annotation attached to the text
                        // at the clicked position
                        if (offset in 3..10) {
                            annotatedText.getStringAnnotations(
                                tag = "URL1", start = offset,
                                end = offset
                            )
                                .firstOrNull()?.let { annotation ->
                                    // If yes, we log its value
                                    Log.d("compose", "Clicked URL1:${annotation.item}, offset:$offset")
                                }
                        } else if (offset > 11) {
                            annotatedText.getStringAnnotations(
                                tag = "URL2", start = offset,
                                end = offset
                            )
                                .firstOrNull()?.let { annotation ->
                                    // If yes, we log its value
                                    Log.d("compose", "Clicked URL2:${annotation.item}, offset:$offset")
                                }
                        }
                    }
                )
//            Text(
//                buildAnnotatedString {
//                    withStyle(style = SpanStyle(color = ColorPrimary)) {
//                        append("H")
//                    }
//                    append("ello ")
//
//                    withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
//                        append("W")
//                    }
//                    append("orld")
//                }
//            )
            }
        }

        Spacer(modifier = Modifier.height(134.dp))

        Button(
            onClick = { /*TODO*/ },
            shape = RoundedCornerShape(8.dp),
            modifier = Modifier.fillMaxWidth(),
        ) {
            val msg = if (viewModel.pageShowFlag == 3) "完 成" else "注 册"
            Text(
                text = msg,
                textAlign = TextAlign.Center,
                fontSize = 16.sp,
                color = Color.White,
            )
        }

        if (viewModel.pageShowFlag != 3) {
            Spacer(modifier = Modifier.height(22.dp))

            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxWidth().clickTime {
                    viewModel.pageShowFlag = if (viewModel.pageShowFlag == 1) {
                        2
                    } else {
                        1
                    }
                }
            ) {
                val id = if (viewModel.pageShowFlag == 1) R.drawable.icon_phone_line else R.drawable.icon_email_line
                Image(
                    painter = painterResource(id = id),
                    contentDescription = null
                )

                val msg = if (viewModel.pageShowFlag == 1) "手机号注册" else "邮箱注册"
                Text(
                    text = msg,
                    fontSize = 14.sp,
                    color = ColorPrimary,
                    modifier = Modifier.padding(start = 6.dp)
                )
            }
        }
    }
}